<template>
	<view class="container">
		<image :src="url+grxximg" mode="" class="grxximg"></image>
		<view class="formBox">
			<page-head title="form"></page-head>
				<view class="uni-padding-wrap uni-common-mt">
					<form @submit="formSubmit" @reset="formReset">
						<view class="uni-form-item uni-column">
							<view class="title">
								<image src="../../static/img/tx.png" mode="" class="icon"></image>
								修改头像：
							</view>
							<image class="uni-input avatar" :src="info.avatar" @click="chooseImg"></image>
							<!-- <button type="default" @click="chooseImg">上传图片</button> -->
							<!-- <image class="scimage" :src="item" v-for="(item,index) in srcImg" :key='index' @click="previewImg(item)"></image> -->
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">
								<image src="../../static/img/name.png" mode="" class="icon"></image>
								姓名：
							</view>
							<input class="uni-input" name="userName" v-model="info.userName" placeholder="请输入姓名" />
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">
								<image src="../../static/img/card.png" mode="" class="icon"></image>
								身份证号：
							</view>
							<input class="uni-input" name="card" v-model="info.card" placeholder="请输入身份证号" />
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">
								<image src="../../static/img/phone.png" mode="" class="icon"></image>
								联系电话：
							</view>
							<input class="uni-input" disabled name="phone" v-model="info.phone" placeholder="请输入联系电话" />
						</view>						
						<view class="uni-btn-v">
							<button form-type="submit" class="btn">提交修改</button>
							<!-- <button type="default" form-type="reset">Reset</button> -->
						</view>
					</form>
				</view>
			</view>
	</view>
</template>

<script>
	import graceChecker from "../../api/graceChecker.js"
	import { userInfo,xgUser } from '@/api/api.js'
	import config from '@/config'
	export default {
		data() {
			return {
				url:config.baseUrl,
				inputValue: '',
				pickerValue: 0,
				srcImg: [],
				image:"",
				info:{},
				grxximg:"/uploads/web/grxximg.png"
			}
		},
		onLoad() {
			this.getData()
		  },
		methods: {
			getData(){
				let that = this
				uni.getStorage({
			    key: 'data1',
			    success: function (res) {
					// 查询用户信息表中是否有该手机号
					userInfo(res.data.phone).then((userRes) => {
						that.info = userRes.info
						if(/^data:image\/\w+;base64/.test(that.info.avatar)){
							that.info.avatar =  that.info.avatar
						}else if(that.info.avatar=='undefined'||!that.info.avatar){
								that.info.avatar =  that.url+'/default/USER_DEFAULT_AVATAR_URL.png'
							}else{
								that.info.avatar =  that.url+that.info.avatar
							}
					  })
			    }
			});
			},
			// 上传文件
				uploadImage() { 
					const baseUrl = config.baseUrl
					let imgList = [];
				    return new Promise((resolve,reject) => {  
				        let returnList;  
				        //上传图片    
				        uni.uploadFile({    
				            url: baseUrl+'/index.php/api/banner/upload', // 你的ThinkPHP服务器地址
				            filePath: this.srcImg[0],
				            name: 'file',
				            formData: {    
				                'id': this.info.id    
				            },    
				            header: {    
				                "Content-Type": "multipart/form-data"    
				            },    
				            success: (res) => {   
								const data = JSON.parse(res.data);
								console.log('上传成功', data);
								// 这里处理返回的图片路径，例如保存到数组中
								imgList.push(data.filename);
								this.imagesList = imgList.join(',')
				                resolve(res.data)  
				            },    
				            fail: (res) => {    
				                // msg("图片上传发生错误")    
				                reject  
				            }    
				        })    
				        // return list   
				    })  
				},
				formSubmit: function(e) {
					console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
					// 获取图片上传
					this.uploadImage()  
					    .then(res => {  
							let imageData = JSON.parse(res)
							this.image = imageData.id
					    })  
					    .catch(e => console.log('eeee',e))  
					    .finally(() => {})
			        //定义表单规则
			        var rule = [
			            {name:"userName", checkType : "string", checkRule:"1,20",  errorMsg:"姓名不正确"},
						{name:"card", checkType : "string", checkRule:"18",  errorMsg:"身份证号不正确"},
						{name:"phone", checkType : "string", checkRule:"11",  errorMsg:"联系电话不正确"},
			        ];
			        //进行表单检查
			        var formData = e.detail.value;
			        var checkRes = graceChecker.check(formData, rule);
			        if(checkRes){
			            // uni.showToast({title:"验证通过!", icon:"none"});
						setTimeout(() => {
							// console.log('formDataformDataformData',formData)
						       formData.avatar = this.info.avatar
							   formData.id = this.info.id
							   // console.log('用户信息用户信息',this.info)
							   // if(formData.avatar==this.info.avatar&&formData.card==this.info.card&&formData.phone==this.info.phone&&formData.userName==this.info.userName){
								  //  uni.showToast({title:'无需修改', icon:"none"});
							   // }else{
								   
							   // }
							   xgUser(formData).then((res) => {
									if(res.code==200){
										uni.showToast({title:res.message, icon:"none"});
									}
							     })
						    }, 2000); // 延迟2秒加载数据
			        }else{
			            uni.showToast({ title: graceChecker.error, icon: "none" });
			        }
				},
				formReset: function(e) {
					console.log('清空数据')
				},
			
			// / 上传图片
				chooseImg () {
					uni.chooseImage({
						count: 1,
						success: (res)=> {
							// this.info.avatar = res.tempFilePaths
							let tempFilePaths = res.tempFilePaths;
							this.srcImg = res.tempFilePaths
							tempFilePaths.forEach((item, index) => {
							  uni.getFileSystemManager().readFile({
								  filePath: item, // 图片文件路径
								  encoding: 'base64', // 编码格式为base64
								  success: res => { // 成功回调
								  console.log('resresres',res)
									let base64 = 'data:image/jpeg;base64,' + res.data; // 拼接data URI
									this.info.avatar = base64
								  },
								  fail: err => {
									console.error('读取文件失败', err);
								  }
								});
							});
						}
					})
				},
				// 预览图片
				previewImg(current) {
					uni.previewImage({
						current,
						urls: this.srcImg,
						// 图片指示器样式: 小圆点
						indicator: 'default',
						// 循环预览
						loop: true
					})
				}
		}
	}
</script>

<style>
	.container{
		width: 100%;
	}
	
	.formBox{
		padding: 20rpx;
		box-shadow: 1px 1px 10px #ddd;
		width: 90%;
		margin: 10px auto 0;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		background-color: #fff;
		box-shadow: 1px 1px 10px #ddd;
	}
	.img{
		position: relative;
		height: 190px;
		line-height: 190px;
		text-align: center;
	}
	
	.img .text{
		position: absolute;
		top: 0;
		text-align: center;
		width: 100%;
		font-size: 20px;
		color: #fff;
	}
	.img image{
		width: 100%;
		height: 100%;
	}
	
	.uni-form-item {
		/* padding: 20rpx 0; */
		width: 100%;
		height: 85rpx;
		border-bottom: 1px solid #ddd;
		margin-top: 10px;
		font-size: 12px;
	}
	
	.uni-column{
		/* border: 1px solid red; */
		/* display: flex; */
	}
	
	.title{
		height: 60rpx;
		line-height: 60rpx;
		width: 250rpx;
		float: left;
		color: #6a8473
	}
	
	
	.title1{
		height: 70px;
	}
	
	.avatar{
		width:100rpx!important;
		height: 100rpx!important;
		border-radius: 50%;
		margin-top:-10px;
	}
	
	.uni-input,.inputSelect{
		height: 60rpx;
		width: 300rpx;
		float: right;
		color: #8080a1;
		text-align: right;
	}
	
	.image{
		height: 50px;
	}
	
	.image button{
		font-size: 12px;
		width: 80px;
		background-color: #2475e7;
		color: #fff;
	}
	
	.btn{
		background-color: #6a8473;
		color: #fff;
		margin-top: 25px;
		border: 1px solid #6a8473;
		height: 75rpx;
		line-height: 75rpx;
		font-size: 29rpx;
		font-weight: 300;
		border-radius: 0;
		
	}
	
	.icon{
		width: 16px;
		height: 16px;
		position: relative;
		top: 2px;
		margin-right: 5px;
		position: relative;
		top: 2px;
	}
	
	.scimage{
		margin-top: 10px;
		width: 100px;
		height: 50px;
		float: right;
		margin-right: 50px;
		margin-bottom: 10px;
	}
	
	.grxximg{
		width: 100%;
		height: 255rpx;
	}
</style>